// 工具类
class Util {
  blockWidth() {
    return this.config.width / this.config.limits
  }

  width(el, n) {
    n = n ? n : this.blockWidth()
    el.style.width = n + 'px'
  }
  height(el, n) {
    n = n ? n : this.config.height
    el.style.height = n + 'px'
  }
  styles(el, styles) {
    for (const rule in styles) {
      el.style[rule] = styles[rule]
    }
  }
}

class Slide extends Util {
  sections = []
  btns = []
  index = 0
  constructor() {
    super()
    this.config = config
  }

  //   基础工作
  run() {
    this.createContainer()
    this.createSections()
    this.createSectionsDivs()
    this.createSectionsDivsAtag()
    this.createSectionsDivsAtagImg()
    this.createTextBtns()
    this.createBtnsEvent()
  }

  //   确认图层位置
  createContainer() {
    this.el = document.querySelector(`${this.config.el}`)
    this.styles(this.el, {
      width: this.width(this.el, this.config.width),
      height: this.height(this.el),
      transformOrigin: `center center -150px`,
    })
  }

  // 创建块元素
  createSections() {
    for (let index = 0; index < this.config.limits; index++) {
      let section = document.createElement('section')
      this.styles(section, {
        width: this.width(section),
        height: this.height(section),
        transformOrigin: `center center -150px`,
      })
      this.sections.push({ index, item: section, divs: [], links: [] })
      this.el.insertAdjacentElement('beforeend', section)
    }
  }

  //   创建div图层
  createSectionsDivs() {
    this.sections.map((obj) => {
      for (let i = 0; i < this.config.images.length; i++) {
        let div = document.createElement('div')
        this.styles(div, {
          width: this.width(div, this.blockWidth()),
          height: this.height(div),
          transformOrigin: `center center -150px`,
        })
        obj.divs.push(div)
        obj.item.insertAdjacentElement('beforeEnd', div)
      }
    })
  }
  //创建a标签
  createSectionsDivsAtag() {
    this.sections.map((obj, index) => {
      obj.divs.map((tag, i) => {
        let a = document.createElement('a')
        a.setAttribute('href', this.config.images[i].links)
        this.styles(a, {
          width: this.width(a),
          height: this.height(a),
        })
        obj.links.push(a)
        tag.insertAdjacentElement('beforeEnd', a)
      })
    })
  }

  //   创建img标签
  createSectionsDivsAtagImg() {
    this.sections.map((obj, index) => {
      obj.links.map((link, i) => {
        let img = document.createElement('img')
        img.src = `${this.config.images[i].path}`
        this.styles(img, {
          width: this.width(img, this.config.width),
          height: this.height(img),
          transform: `translateX(-${this.blockWidth() * index}px)`,
        })
        link.insertAdjacentElement('beforeEnd', img)
      })
    })
  }

  //   创建文本按钮
  createTextBtns() {
    let div = document.createElement('div')
    div.classList.add('btns')
    for (let i = 0; i < this.config.images.length; i++) {
      let span = document.createElement('span')
      span.innerText = i + 1
      div.insertAdjacentElement('beforeend', span)
      this.btns.push(span)

      if (this.index == i) {
        span.classList.add('active')
      }
    }
    this.el.insertAdjacentElement('beforeend', div)
  }

  //  添加按钮事件 点击之后开始旋转
  createBtnsEvent() {
    for (const btn of this.btns) {
      btn.addEventListener('click', this.btnEvent.bind(this, this.btns.indexOf(btn)))
    }
  }

  //   按钮点击事件
  btnEvent(index) {
    this.index = index
    this.toggleBtnActive()
    this.sections.map((obj, i) => {
      setTimeout(() => {
        this.styles(obj.item, { transform: `rotateX(${index * 90}deg)` })
      }, this.config.timeout * i)
    })
    // console.log(this)
  }
  //   改变按钮样式
  toggleBtnActive() {
    this.btns.map((btn, i) => {
      btn.classList.remove('active')
      if (i == this.index) {
        btn.classList.add('active')
      }
    })
  }
}
